<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrap{
            width: 80%;
            margin: 20px auto;
        }
        table{
            width: 600px;
        }
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div>
            姓名:<input type="text" id="username">
            年龄：<input type="text" id="age">
        </div>
    <input type="radio" name="sex" class="sex" value="男" checked>男
    <input type="radio" name="sex" class="sex" value="女">女
    </div>
    <div>
        <button id="add">添加</button>
        <button>按年龄排序</button>
    </div>
    <div>
        <input id="searchText" type="text" placeholder="输入姓名">
        <button id="order">搜索</button>
    </div>
    <div>
        <table border="1" >
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>1</td>
                    <td>小王</td>
                    <td>18</td>
                    <td>男</td>
                    <td>
                    <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //1.假设在localStorage里有一个数组
        if(!localStorage.personList) {
            localStorage.personList="[]"
        }
        
    </script>
</body>
</html> 